<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 事件捕获、事件冒泡 -->
  <div id="box" style="width: 300px; height: 300px; background: red">
    <div id="outer" style="width: 200px; height: 200px; background: yellow">
      <div id="inner" style="width: 100px; height: 100px; background: green">
        <div id="inner2" style="width: 50px; height: 50px; background: pink"></div>
      </div>
    </div>
  </div>
  <script>
    const box = document.getElementById('box');
    const outer = document.getElementById('outer');
    const inner = document.getElementById('inner');
    const inner2 = document.getElementById('inner2');

    box.addEventListener('click', function () {
      console.log('box')
    }, false)
    outer.addEventListener('click', function () {
      console.log('outer')
    }, true)
    inner.addEventListener('click', function () {
      console.log('inner')
    }, false)
    inner2.addEventListener('click', function () {
      console.log('inner2')
    }, true) 
  </script>
  <!-- <button id="clickMe">start</button>
  <img id="img" style="display: none;"
    src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1607709602&di=1b10fd366ba600e91d7acf218a9dda0a&src=http://00.minipic.eastday.com/20170511/20170511132314_6cab43df10415723a8f3bdd9dc5364ed_8.jpeg"
    alt="">
  <script>
    function triggerEvent(target, eventType, eventDetail) {
      const event = new CustomEvent(eventType, {
        detail: eventDetail
      })
      target.dispatchEvent(event)
    }
    function performAjaxPeration() {
      triggerEvent(document, 'ajax-start', { url: 'my-url' })
      setTimeout(function () {
        triggerEvent(document, 'ajax-complete')
      }, 5000)
    }
    const clickMe = document.getElementById('clickMe');
    clickMe.addEventListener('click', function () {
      performAjaxPeration()
    })


    document.addEventListener('ajax-start', function () {
      console.log('ajax-start')
      document.getElementById('img').style.display = 'block'
    })
    document.addEventListener('ajax-complete', function () {
      console.log('ajax-complete')
      document.getElementById('img').style.display = 'none'
    }) -->
  </script>
</body>

</html>